<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p class="p">1</p>
    <p id="p2">2</p>
    <p class="p">3</p>


    <input type="text" name="a">

    <script>

        // DOM 查询元素
        //   document.getElementById()   通过id获取元素    唯一
        //   document.getElementsByClassName()   通过类型获取   得到的是伪数组   HTMLCollection 
        //   document.getElementsByTagName()   通过类型获取   得到的是伪数组   HTMLCollection 
        //   document.getElementsByName()    通过name属性获取   得到的也是伪数组   NodeList    不推荐使用


        // ES6新增的查询方法
        //    querySelector 通过选择器获取元素    默认只拿到第一个
        //    querySelectorAll  获取所有的   得到的伪数组   NodeList


        var oPs = document.getElementsByTagName('p') ;
        console.log(oPs);


        var oInp = document.getElementsByName('a') ;
        console.log(oInp);

        // query 查询   selector 选择器
        var oP = document.querySelector('p') ;
        console.log(oP);


        var oPs = document.querySelectorAll('p') ;
        console.log(oPs);


        var oPs2 = document.querySelectorAll('.p') ;
        console.log(oPs2);


        var oP1 = document.querySelector('p:first-child') ;
        console.log(oP1);


        var oP2 = document.querySelector('#p2') ;
        console.log(oP2);


    </script>
    
</body>
</html>